<!--
    和后端交互处理部分需完善,参考教程 第21-22集
-->
<template>

    <PanelHead :title="panelTitle" :description="panelDescription"/>
    <div class="btns">
        <el-button icon="Plus" type="primary" @click="open(null)" >新增</el-button>
    </div>

    <el-table :data="tableData.list" border style="width: 100%">
        <el-table-column prop="id" label="id"  />
        <el-table-column prop="name" label="名称"  />
        <el-table-column prop="permissionName" label="权限" width="500" />

        <el-table-column label="操作" width="180" >
            <template #default="scope">
                <el-button type="primary" @click="open(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-info">
        <el-pagination
                v-model:current-page="paginationData.pageNum"
                :page-size="paginationData.pageSize"
                size="small"
                :background="false"
                layout="total, prev, pager, next"
                :total="tableData.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>

    <el-dialog
            v-model="dialogFormVisible"
            title="添加权限"
            width="500"
            :before-close="beforeClose"
    >
        <el-form
            ref="formRef"
            label-width="100px"
            label-position="left"
            :model="form"
        >
            <el-form-item v-show="false" prop="id">
                <el-input v-model="form.id" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请填写权限名称" />
            </el-form-item>
            <el-form-item label="权限">
                <el-tree
                        ref="treeRef"
                        style="max-width: 600px"
                        :data="permissionData"
                        node-key="id"
                        show-checkbox
                        :default-checked-keys="defaultKeys"
                />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirm(formRef)" >确认</el-button>
            </div>
        </template>

    </el-dialog>
</template>
<script setup>
    import { ref, reactive, onMounted, nextTick } from 'vue'
    import { getMenuList, setMenu, userMenuList } from '../../../api'

    const formRef = ref();

    onMounted(()=>{

        // 发送请求，获得菜单数据
        getMenuList().then( ({data}) => {
            permissionData.value = data.data;
        })


        // 菜单数据
        //console.log(data);

    });

    // 打开弹窗
    const open = ( rowData = {} ) => {
        dialogFormVisible.value = true;
        // 弹窗打开form生成是异步的
        nextTick(() => {

                // 编辑页面赋值
                if(rowData){
                    console.log(rowData);
                    // Object.assign()
                    // treeRef.value.setCheckedKeys()
                }
            }
        )
    }

    // 列表数据
    const tableData = reactive({
        list:  [
            {
                id: 1,
                name: 'Tom',
                permissionName: '控制台',
            },
        ],
        total: 1
    });

    const paginationData = reactive({
        pageNum: 1,
        pageSize: 10
    });

    // 请求列表数据
    const getListData = () => {
        userMenuList(paginationData).then(({ data }) => {
            const { list, total } = data.data;
            tableData.list = list;
            tableData.total = total;
        } )
    }

    // 菜单假数据
    const mockData = [
        { id: 1, label: '控制台' },
        {
            id: 2,
            label: '权限管理',
            children: [
                { id: 21, label: '账号管理' },
                { id: 22, label: '菜单管理' }
            ]
        }
        ];

    // form数据
    const form = reactive(
        {
            id: '',
            name:'',
            permissions: ''
        });

    // 树形菜单权限数据
    const permissionData =  ref([]);

    // 弹窗的显示隐藏
    const dialogFormVisible = ref(false);

    // 关闭弹窗的回调
    const beforeClose = () => {
        console.log("关闭弹窗--call");
        dialogFormVisible.value = false;
        // 重置表单
        formRef.value.resetFields();
        // tree选择重置
        treeRef.value.setCheckedKeys(defaultKeys);
    }

    // 默认选中数据
    const defaultKeys = [];

    // 树形控件
    const treeRef = ref();

    // 表单提交
    const confirm = async (formEl) => {
        if(!formEl) return;

        // 获取选择的checkbox数据
        const permissions =  JSON.stringify(treeRef.value.getCheckedKeys());
        //console.log('permission',permissions);
        setMenu({
            id: form.id,
            name: form.name,
            permissions
        }).then( ({data}) => {
            if (data.code === '0'){
                ElMessage.success(data.data);
            }

            // 关闭弹窗
            beforeClose();
            // 请求列表数据
            // getListData
        });

    }

    // 页面数据变更
    const handleSizeChange = (val) => {
        // paginationData.pageNum = val;
        // getListData();
    }

    // 当前页码改变
    const handleCurrentChange = (val) => {
        // paginationData.pageNum = val;
        // getListData();
    }

    const panelTitle = ref('菜单管理');
    const panelDescription = ref('菜单规则通常对应一个控制器的方法,同时菜单栏数据也从规则中获取');

</script>
<style lang="less" scoped>
    .btns{
        padding: 10px 0 10px 10px;
        background-color: #fff;
    }
</style>